<template>
	<view class="v1">

		<!-- v2父容器  子view使用绝对布局 -->
		<view class="v2">
			<view class="dltext">登录</view>

			<!-- 手机号 -->
			<view class="phoneCs">

				<image src="/static/手机图片.png" class="ph"></image>
				<input placeholder="请输入手机号" v-model="ruleForm.Tel" />
			</view>

			<!-- 密码 -->
			<view class="passwordCs">
				<image src="/static/密码.png" class="ps"></image>
				<input password placeholder="请输入密码" v-model="ruleForm.LoginPwd" />
			</view>

			<!-- 注册 和忘记密码 -->
			<view class="zhuce">
				<navigator>立即注册</navigator>
				<navigator>忘记密码?</navigator>
			</view>

			<!-- 登录按钮 -->
			<view class="denglu">
				<button class="btn-dl" type="primary" @click="Login">登录</button>
			</view>

			<!-- 协议区  xieyi -->
			<view class="xieyi">
				<checkbox class="isXY"></checkbox>
				<view class="text-xy">同意小程序的《使用协议》</view>
			</view>
		</view>

		<!-- 提示框  使用以下方式登录 -->
		<!-- <view class="v3">
			<view class="line"></view>
			<view class="lText">您还可以使用以下方式登录</view>
			<view class="line"></view>
		</view> -->

		<!-- qq  weixin  weibo 图标展示view -->
		<view class="qwwIcon">
			<!-- <image src="/static/短信图片.png"></image> -->
			<!--   <image src="/images/qq.png"></image>
	     <image src="/images/weibo.png"></image> -->
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import loginapi from '../../api/loginapi'

	// const router = useRouter();
	const ruleForm = ref({
		Tel: "",
		LoginPwd: ""
	})
	console.log(sessionStorage.getItem("token"));
	const Login = () => {
		loginapi.TelLogin(ruleForm.value).then(res => {

			console.log("login", res.data)
			sessionStorage.setItem("token", res.data.token);
			sessionStorage.setItem("ProfilePhoto", res.data.ProfilePhoto);
			sessionStorage.setItem("UserId", res.data.UserId);
			sessionStorage.setItem("UserName", res.data.UserName);
			wx.switchTab({
				url: '/pages/Personal/Personal'
			})
		}).catch(err => {
			console.log("err=>", err);
		})

	}
</script>

<style scoped>
	/* pages/Login/Login.wxss */
	/* 最大的父元素 */
	.v1 {
		display: flex;
		position: absolute;
		height: 100%;
		width: 100%;
		background: #356363;
		/* 换图片 */
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	/* 白色区域 */
	.v1 .v2 {
		position: relative;
		margin-top: 150rpx;
		/* left: 100rpx; */
		width: 545rpx;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
	}

	/* 白色区域内的登录文本 */
	.v1 .v2 .dltext {
		margin-top: 50rpx;
		position: absolute;
		margin-left: 80rpx;
		width: 150rpx;
		height: 100rpx;
		font-size: 60rpx;
		font-family: Helvetica;
		color: #000000;
		line-height: 100rpx;
		letter-spacing: 2rpx;
	}

	/* 手机图片+输入框+下划线的父容器view */
	.v1 .v2 .phoneCs {
		margin-top: 200rpx;
		margin-left: 35rpx;
		position: absolute;
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
	}

	/* 手机图标 */
	.v1 .v2 .phoneCs .ph {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 40rpx;
		height: 55rpx;
	}

	/* 密码图标 */
	.v1 .v2 .passwordCs .ps {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 手机号输入框 */
	.v1 .v2 .phoneCs input {
		width: 200rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		margin-left: 30rpx;
	}

	/* 密码图标+输入框+小眼睛图标+下划线父容器view */
	.v1 .v2 .passwordCs {
		margin-top: 400rpx;
		margin-left: 35rpx;
		position: absolute;
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
	}

	/* 密码输入框 */
	.v1 .v2 .passwordCs input {
		width: 100%;
		font-size: 25rpx;
		margin-top: 15rpx;
		margin-left: 30rpx;
	}

	/* 注册+忘记密码父容器 */
	.v1 .v2 .zhuce {
		font-size: 25rpx;
		margin-left: 85rpx;
		width: 370rpx;
		margin-top: 540rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
	}

	/* 登录按钮容器view */
	.v1 .v2 .denglu {
		width: 350rpx;
		height: 50rpx;
		position: absolute;
		margin-top: 600rpx;
		margin-left: 85rpx;

	}

	/* 登录按钮 */
	.v1 .v2 .denglu button {
		padding: 0rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}

	/* 复选框+协议文字容器view */
	.v1 .v2 .xieyi {
		margin-left: 10rpx;
		margin-top: 680rpx;
		width: 400rpx;
		display: flex;
		position: absolute;
	}

	/* 复选框 */
	.v1 .v2 .xieyi .isXY {
		margin-left: 85rpx;
		/* 修改复选框的大小 */
		transform: scale(.6);
	}

	/* 协议文本 */
	.v1 .v2 .xieyi .text-xy {

		margin-left: 10rpx;
		margin-top: 10rpx;
		color: #000000;
		font-size: 18rpx;
	}

	/* 提示文本 */
	.v3 {
		display: flex;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 60rpx;
		padding-top: 50rpx;
	}

	.v3 .line {
		margin-left: 5rpx;
		margin-top: 18rpx;
		width: 120rpx;
		height: 3rpx;
		background-color: #FFFFFF;
	}

	.v3 .lText {
		color: #FFFFFF;
		font-size: 25rpx;
	}

	/* qq wx wb */
	.qwwIcon {
		margin-top: 50rpx;
		padding-top: 30rpx;
		position: relative;
		display: flex;
		width: 100%;
		height: 100rpx;
		justify-content: center;

	}

	.qwwIcon image {
		width: 80rpx;
		height: 80rpx;
		align-content: center;
	}
</style>